import React, { useEffect, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View, Text, Input, Form, Button } from "@tarojs/components";
import { setData, getData } from "@/src/globalData";
import FooterBtn from "@/components/FooterBtn";

import "./index.scss";

const Index: React.FC<{}> = () => {
  const [invoiceInfo, setInvoiceInfo] = useState<{ [key: string]: string }>({});

  useDidShow(() => {
    const newInvoiceInfo = getData("invokceData");
    if (newInvoiceInfo) {
      setInvoiceInfo(newInvoiceInfo);
    }
  });

  const onSubmit = (e) => {
    console.log("e----------->>>", e.detail.value);
    const values = e.detail.value;
    if (values.name && values.phone && values.identification) {
      setData("invokceData", values);
      Taro.navigateBack({ delta: 1 });
    } else {
      Taro.showToast({
        title: "请完善合同人信息！",
        icon: "none",
      });
    }
  };
  return (
    <View className="singer-form-page">
      <Form onSubmit={onSubmit}>
        <View className="form-area">
          <View className="form-item">
            <View className="label">合同人</View>
            <Input
              className="value"
              name="name"
              placeholder="请填写合同人姓名"
              placeholderClass="placeholder"
              value={invoiceInfo.name}
            />
          </View>
          <View className="form-item">
            <View className="label">手机号</View>
            <Input
              placeholder="请输入手机号"
              className="value"
              name="phone"
              placeholderClass="placeholder"
              type="number"
              maxlength={11}
              value={invoiceInfo.phone}
            />
          </View>
          <View className="form-item">
            <View className="label">身份证</View>
            <Input
              placeholder="请输入身份证号"
              className="value"
              name="identification"
              placeholderClass="placeholder"
              type="idcard"
              value={invoiceInfo.identification}
            />
          </View>
        </View>
        <Button formType="submit">
          <FooterBtn content={<Text>确认添加</Text>} />
        </Button>
      </Form>
    </View>
  );
};

export default Index;
